<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <style>
        /*解决checkbox不居中问题*/
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
<div class="layui-container">
    <!-- 搜索内容 -->
    <div>
        <div class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">
                        游戏名称
                    </label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="游戏名称" id="gamename"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">
                        Bug状态
                    </label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="Bug状态" id="state"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">
                        紧急程度
                    </label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="紧急程度" id="degree"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" id="searchBtn">搜索</button>
                </div>
            </div>

        </div>
    </div>
    <!-- 显示数据的table -->
    <div>
        <table id="dataTable" lay-filter="dataTableFilter"></table>
    </div>
</div>
<!-- 工具栏模板 -->
<!-- 头工具户栏 -->
<script type="text/html" id="headerBtns">
    <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">停用</button>
</script>
<!-- 行工具栏 -->
<script type="text/html" id="rowBtns">
    <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="update">修改</button>
</script>
<!-- 新增用户信息模板 -->
<script type="text/html" id="editForm">
    <div style="padding-left:100px;padding-top:20px">
        <form class="layui-form layui-form-pane" lay-filter="editFormFilter">
            <!--<input type="hidden" name="service" value="add"/>-->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">
                        游戏名
                    </label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="游戏名" name="gamename" lay-verify="required"
                               lay-reqText="请输入游戏名"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">
                        负责人
                    </label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="负责人" name="person" lay-verify="required"
                               lay-reqText="请输入负责人"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">
                        bug描述
                    </label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="bug描述" name="desc" lay-verify="required"
                               lay-reqText="请输入bug描述"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">
                        bug状态
                    </label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="bug状态" name="state" lay-verify="required"
                               lay-reqText="请输入bug状态"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">
                        出现时间
                    </label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="出现时间" name="createtime" lay-verify="required"
                               lay-reqText="请输入出现时间"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">
                        紧急程度
                    </label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="紧急程度" name="degree" lay-verify="required"
                               lay-reqText="请输入紧急程度"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">
                        修复时间
                    </label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="修复时间" name="updatetime" lay-verify="required"
                               lay-reqText="请输入修复时间"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">
                        测试通过时间
                    </label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="测试通过时间" name="adopt" lay-verify="required"
                               lay-reqText="请输入测试通过时间"/>
                    </div>
                </div>
            </div>
            <input type="hidden" lay-submit lay-filter="submitFormFilter" id="submitFormBtn"/>
        </form>
    </div>
</script>

</body>
<script src="../static/layui/layui.js"></script>

<script>
    layui.use(['form', 'jquery', 'table', 'layer'], function () {
        //初始化对象
        var form = layui.form;
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;

        //初始化表格
        var t = table.render({
            id: "dataTableId",
            elem: "#dataTable", //表格容器
            url: "/tester/list",//数据接口
            page: true,//开启分页
            width: "1330",
            height: "520",
            toolbar: "#headerBtns",
            cols: [[
                {type: "checkbox", width: "80"},
                {field: "id", title: "游戏ID", width: "80"},
                {field: "gamename", title: "游戏名", width: "110"},
                {field: "person", title: "负责人", width: "110"},
                {field: "desc", title: "bug描述", width: "110"},
                {
                    field: "state", title: "bug状态", width: "100", templet: function (d) {
                        if (d.state == 1) {
                            return "<font color='red'>紧急</font>";
                        } else if (d.state == 2) {
                            return "<font color='green'>一般</font>";
                        } else if (d.state == 3) {
                            return "<font color='daa520'>不紧急</font>";
                        } else if (d.state == 4) {
                            return "<font color='gray'>通过</font>";
                        }
                    }
                },
                {field: "createtime", title: "出现时间", width: "140"},
                {
                    field: "degree", title: "紧急程度", width: "140",templet:function (d) {
                        if (d.degree == 1) {
                            return "<font color='red'>一级</font>";
                        } else if (d.degree == 2) {
                            return "<font color='green'>二级</font>";
                        } else if (d.degree == 3) {
                            return "<font color='#daa520'>三级</font>";
                        } else if (d.degree == 4) {
                            return "<font color='gray'>已解决</font>";
                        }
                    }
                },
                {field: "updatetime", title: "修复时间", width: "140"},
                {field: "adopt", title: "测试通过时间", width: "140"},
                {title: "操作", width: "250", toolbar: "#rowBtns"}
            ]],//表格头信息
            parseData: function (rs) {//数据格式解析
                if (rs.code == 200) {
                    return {
                        "code": rs.code,
                        "msg": rs.msg,
                        "count": rs.data.total,
                        "data": rs.data.list
                    }
                }

            },
            response: {	// 设置响应码
                statusCode: 200 //规定成功的状态码，默认：0
            }
        });

        //为搜索按钮绑定事件
        $("#searchBtn").click(function () {
            var gamename = $("#gamename").val();
            var state = $("#state").val();
            var degree = $("#degree").val();
            //表格重载
            t.reload({
                where: {    //设定异步数据接口的额外参数
                    'gamename': gamename,
                    'state': state,
                    'degree': degree
                }
            });
        });
        //  table.on新增监听事件 , toolbar:是固定事件名 ;  dataTableFilter:是table原始容器的属性 lay-filter="对应的值"
        table.on("toolbar(dataTableFilter)", function (obj) {
            var event = obj.event;  //获得事件类型(名称)
            if (event == "add") {
                //弹出层  让管理员输入 用户信息
                add();
            } else if (event == "del") {
                //获取被选中的数据的ID
                var checkStatus = table.checkStatus('dataTableId');
                var data = checkStatus.data;
                if (data.length == 0) {
                    layer.msg("请先选择要停用的账号!");
                    return false;
                }
                //获取选中的数据  传给服务器 进行更新状态
                layer.confirm("你确定要停用吗?", function (index) {
                    console.log("停用了!==========");
                    del(data, index);
                });
            }
        });
        //对table中行的监听   重置密码========================================
        table.on("tool(dataTableFilter)", function (d) {
            var event = d.event; //获取事件类型
            var data = d.data;// 获取当前行数据
            if (event == "update") {
                //更新
                update(data);
            }
        });

        //用户新增具体方法
        function add() {
            layer.open({
                id: "add",
                title: '编辑',
                //
                content: $("#editForm").html(),//新增表单内容
                btn: ['提交', '取消'],  //设置按钮类型
                area: ['500px', '450px'],//设置窗口大小
                yes: function (layero, index) {//点击提交时触发
                    $("#submitFormBtn").click();
                },
                btnAlign: 'center', //按钮居中显示
                success: function (layero, index) {// 页面弹出成功触发
                    //重新渲染表单
                    form.render();
                    //为表单新增监听提交事件
                    form.on("submit(submitFormFilter)", function (d) {
                        $.post("/tester/add", d.field, function (rs) {
                            //业务正常
                            if (rs.code == 200) {
                                layer.msg(rs.msg);
                                //让搜索按钮进行点击  刷新table
                                $("#searchBtn").click();
                                //关闭弹层
                                layer.close(index);
                                return false;
                            }
                            layer.msg(rs.msg);
                        });
                        return false;//阻止表单默认提交
                    });
                }
            });
        }

        // 停用用户的方法
        function del(data, index) {
            var ids = "";
            //jquery 中each循环
            $.each(data, function (index, value) {
                ids = ids + value.id + ",";
            });
            $.post("/tea/del" ,{ids:ids}, function (rs) {
                if (rs.code == 200) {
                    layer.msg(rs.msg);
                    //让搜索按钮进行点击  刷新table
                    $("#searchBtn").click();
                    //关闭弹层
                    layer.close(index);
                    return false;
                }
                //显示 失败信息
                layer.msg(rs.msg);
                //关闭弹层
                layer.close(index);
            },"json");
        }

        // 修改客户信息=====================================
        function update(data) {
            layer.open({
                id: "add",
                title: '编辑',
                //
                content: $("#editForm").html(),//新增表单内容
                btn: ['提交', '取消'],  //设置按钮类型
                area: ['500px', '450px'],//设置窗口大小
                yes: function (layero, index) {//点击提交时触发
                    $("#submitFormBtn").click();
                },
                btnAlign: 'center',
                success: function (layero, index) {// 页面弹出成功触发
                    //为form表单赋值
                    form.val("editFormFilter", {
                        'gamename': data.gamename,
                        'person': data.person,
                        'desc': data.desc,
                        'state': data.state,
                        'createtime': data.createtime,
                        'degree': data.degree,
                        'updatetime': data.updatetime,
                        'adopt': data.adopt,
                    });
                    //重新渲染表单
                    form.render();
                    //为form绑定提交事件
                    //为表单新增监听提交事件
                    form.on("submit(submitFormFilter)", function (d) {
                        d.field.id = data.id;//客户ID
                        $.post("/tester/upd", d.field, function (rs) {
                            //业务正常
                            if (rs.code == 200) {
                                layer.msg(rs.msg);
                                //让搜索按钮进行点击  刷新table
                                $("#searchBtn").click();
                                //关闭弹层
                                layer.close(index);
                                return false;
                            }
                            layer.msg(rs.msg);
                        },);
                        return false;//阻止表单默认提交
                    });
                }
            });
        }

    });</script>
</html>

